<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华少的Flask世界</title>
    <!-- 引入Font Awesome图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 1. 基础配置：CSS变量统一管理，便于后续修改 */
        :root {
            --bg-gradient-1: #1a1a1a;
            --bg-gradient-2: #2d2d2d;
            --bg-gradient-3: #1a237e;
            --bg-gradient-4: #3949ab;
            --accent-color: #4682b4; /* 主强调色（钢蓝） */
            --light-accent: #6495ed; /* 次强调色（ CornflowerBlue） */
            --text-color: #ffffff;
            --particle-bg: rgba(255, 255, 255, 0.1);
            --shadow-base: 0 0 30px rgba(100, 149, 237, 0.6);
            --shadow-hover: 0 0 50px rgba(70, 130, 180, 0.8), 0 0 20px rgba(255, 255, 255, 0.5) inset;
            --animation-duration-base: 15s; /* 背景渐变周期 */
            --particle-count-initial: 20; /* 初始粒子数 */
            --particle-count-click: 8; /* 点击粒子数 */
        }

        /* 2. 基础样式重置（更严谨） */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        }

        /* 3. 页面容器优化：提升渲染性能 */
        html, body {
            height: 100vh;
            width: 100vw;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 2rem; /* 适配移动端，减少间距 */
            padding: 1rem;
            background: linear-gradient(45deg, var(--bg-gradient-1), var(--bg-gradient-2), var(--bg-gradient-3), var(--bg-gradient-4));
            background-size: 400% 400%;
            animation: gradientBG var(--animation-duration-base) ease infinite;
            cursor: default;
            will-change: background-position; /* 提前告知浏览器优化渲染 */
        }

        /* 4. 核心动画：统一命名，避免冲突 */
        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* 5. 粒子样式：优化层级和渲染 */
        .particle {
            position: absolute;
            border-radius: 50%;
            background: var(--particle-bg);
            pointer-events: none;
            z-index: 0;
            will-change: transform, opacity; /* 提升动画流畅度 */
        }

        /* 6. 图片容器：优化加载体验和响应式 */
        .image-container {
            position: relative;
            perspective: 1000px;
            z-index: 1;
            width: 80%;
            max-width: 600px; /* 限制最大宽度，避免大屏变形 */
            height: 50vh;
            background: rgba(0, 0, 0, 0.3); /* 加载占位背景 */
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .animated-image {
            width: 100%;
            height: 100%;
            object-fit: cover; /* 保持图片比例，填充容器 */
            border-radius: 15px;
            box-shadow: var(--shadow-base);
            transform-style: preserve-3d;
            animation: img-float 6s ease-in-out infinite, img-rotate 20s linear infinite;
            transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1); /* 更自然的过渡曲线 */
        }

        @keyframes img-float {
            0% { transform: translateY(0px) rotateY(0deg); }
            50% { transform: translateY(-20px) rotateY(5deg); }
            100% { transform: translateY(0px) rotateY(0deg); }
        }

        @keyframes img-rotate {
            0% { transform: rotateY(0deg); }
            100% { transform: rotateY(360deg); }
        }

        .animated-image:hover {
            transform: scale(1.05) rotateY(10deg);
            box-shadow: var(--shadow-hover);
        }

        /* 7. 文字容器：语义化+响应式优化 */
        .text-container {
            position: relative;
            text-align: center;
            z-index: 1;
            padding: 1rem;
            width: 100%;
            max-width: 800px;
        }

        .animated-text {
            font-size: clamp(1.5rem, 4vw, 3rem); /* 优化响应式字体范围 */
            color: var(--text-color);
            font-weight: 700;
            text-shadow:
                0 0 10px rgba(255, 255, 255, 0.8),
                0 0 20px var(--light-accent),
                0 0 30px var(--light-accent),
                0 0 5px #fff;
            max-width: 100%;
            opacity: 0;
            animation: text-fade 1s ease forwards;
            white-space: pre-wrap; /* 用CSS控制换行，替代<br> */
        }

        @keyframes text-fade {
            to { opacity: 1; }
        }

        /* 8. 文字字符动画：优化节奏感 */
        .char {
            display: inline-block;
            position: relative;
            animation: char-jump 2.5s ease-in-out infinite;
            opacity: 0;
            transform-origin: center bottom;
        }

        @keyframes char-jump {
            0% {
                opacity: 0.7;
                transform: translateY(0) scale(1);
                text-shadow:
                    0 0 8px rgba(255, 255, 255, 0.7),
                    0 0 15px var(--light-accent);
            }
            25% {
                opacity: 1;
                transform: translateY(-12px) scale(1.1);
                text-shadow:
                    0 0 12px #fff,
                    0 0 20px var(--accent-color),
                    0 0 5px #fff;
            }
            50% {
                opacity: 0.9;
                transform: translateY(-5px) scale(1.05);
                text-shadow:
                    0 0 10px #fff,
                    0 0 18px var(--accent-color);
            }
            75% {
                opacity: 0.8;
                transform: translateY(-8px) scale(1.08);
                text-shadow:
                    0 0 11px #fff,
                    0 0 16px var(--accent-color);
            }
            100% {
                opacity: 0.7;
                transform: translateY(0) scale(1);
                text-shadow:
                    0 0 8px rgba(255, 255, 255, 0.7),
                    0 0 15px var(--light-accent);
            }
        }

        /* 9. 装饰图标：优化位置和动画 */
        .decor-icon {
            color: rgba(255, 255, 255, 0.7);
            font-size: clamp(1.5rem, 3vw, 2rem);
            animation: icon-pulse 3s ease-in-out infinite;
            opacity: 0.7;
            position: absolute;
        }

        @keyframes icon-pulse {
            0%, 100% { transform: scale(1); opacity: 0.7; }
            50% { transform: scale(1.2); opacity: 1; }
        }

        /* 10. 底部提示：语义化+优化样式 */
        .hint-text {
            position: absolute;
            bottom: 1rem;
            color: rgba(255, 255, 255, 0.7);
            font-size: clamp(0.8rem, 2vw, 1rem);
            animation: text-fade 5s ease forwards;
            opacity: 0;
            text-align: center;
        }

        /* 11. 音乐控制按钮：新增功能，匹配提示 */
        .music-control {
            position: absolute;
            top: 1rem;
            right: 1rem;
            z-index: 2;
            background: rgba(0, 0, 0, 0.5);
            border: none;
            color: #fff;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 0 10px var(--light-accent);
        }

        .music-control:hover {
            background: var(--accent-color);
            transform: scale(1.1);
        }
    </style>
</head>
<body>
    <!-- 新增：音乐控制按钮 -->
    <button class="music-control" id="musicBtn">
        <i class="fas fa-play" id="musicIcon"></i>
    </button>
    <!-- 音频资源（免费无版权片段，可替换） -->
    <audio id="bgMusic" loop preload="metadata" src="https://cdn.freesound.org/previews/347/347210_6117275-lq.mp3">
        您的浏览器不支持音频播放
    </audio>

    <!-- 装饰图标：优化定位，避免重叠 -->
    <i class="fas fa-star decor-icon" style="top: 15%; left: 8%; animation-delay: 0.5s;"></i>
    <i class="fas fa-moon decor-icon" style="top: 10%; right: 8%; animation-delay: 1s;"></i>
    <i class="fas fa-star decor-icon" style="bottom: 20%; left: 5%; animation-delay: 1.5s;"></i>

    <!-- 动画图片：优化容器结构 -->
    <div class="image-container">
        <img src="/护眼.jpg" alt="护眼主题图片" class="animated-image" loading="eager">
    </div>

    <!-- 动画文字：语义化h1标签，移除<br> -->
    <div class="text-container">
        <h1 class="animated-text" id="textDisplay">欢迎来到华少的Flask世界，这是一个奇妙的世界
凡有的，还要加给他，叫他有余；凡没有的，连他所有的，也要夺去</h1>
    </div>

    <!-- 底部提示：语义化p标签 -->
    <p class="hint-text">点击屏幕生成粒子 | 点击右上角按钮播放音乐，文字将随节奏跳动</p>

    <script>
        // DOM加载完成后执行
        document.addEventListener('DOMContentLoaded', () => {
            // 1. 音乐控制逻辑（新增）
            const musicBtn = document.getElementById('musicBtn');
            const musicIcon = document.getElementById('musicIcon');
            const bgMusic = document.getElementById('bgMusic');

            musicBtn.addEventListener('click', () => {
                if (bgMusic.paused) {
                    bgMusic.play().catch(err => {
                        alert('浏览器限制自动播放，请手动点击页面后重试');
                    });
                    musicIcon.classList.replace('fa-play', 'fa-pause');
                } else {
                    bgMusic.pause();
                    musicIcon.classList.replace('fa-pause', 'fa-play');
                }
            });

            // 2. 文字节奏跳动逻辑（优化可读性）
            const textDisplay = document.getElementById('textDisplay');
            const originalText = textDisplay.textContent;
            textDisplay.textContent = ''; // 清空原文字，重新构建
            const charAnimationBaseDelay = 0; // 字符动画基础延迟

            // 拆分文字，为每个字符添加独立动画
            for (let i = 0; i < originalText.length; i++) {
                const char = originalText[i];
                const charSpan = document.createElement('span');
                charSpan.className = 'char';

                // 处理空格（避免折叠）
                charSpan.textContent = char === ' ' ? '\u00A0' : char;

                // 随机动画参数：制造错落的节奏感
                const randomDelay = charAnimationBaseDelay + Math.random() * 0.8;
                const randomDuration = 2 + Math.random() * 0.8;

                charSpan.style.animationDelay = `${randomDelay}s`;
                charSpan.style.animationDuration = `${randomDuration}s`;

                // 字符淡入效果
                charSpan.style.opacity = '0';
                setTimeout(() => {
                    charSpan.style.opacity = '1';
                }, randomDelay * 1000);

                textDisplay.appendChild(charSpan);
            }

            // 3. 粒子效果逻辑（性能优化）
            // 初始生成粒子
            createParticles(var(--particle-count-initial));

            // 点击屏幕生成粒子
            document.body.addEventListener('click', (e) => {
                createParticles(var(--particle-count-click), e.clientX, e.clientY);
            });

            // 4. 粒子创建函数（优化路径随机性和移除逻辑）
            function createParticles(count, clickX = null, clickY = null) {
                for (let i = 0; i < count; i++) {
                    const particle = document.createElement('div');
                    particle.className = 'particle';

                    // 随机粒子大小（5-15px）
                    const particleSize = Math.random() * 10 + 5;
                    particle.style.width = `${particleSize}px`;
                    particle.style.height = `${particleSize}px`;

                    // 粒子位置（点击位置或随机）
                    if (clickX && clickY) {
                        particle.style.left = `${clickX + (Math.random() * 80 - 40)}px`;
                        particle.style.top = `${clickY + (Math.random() * 80 - 40)}px`;
                    } else {
                        particle.style.left = `${Math.random() * 100}vw`;
                        particle.style.top = `${Math.random() * 100}vh`;
                    }

                    // 随机粒子动画（每个粒子路径不同）
                    const animDuration = Math.random() * 8 + 4; // 4-12秒
                    const animDelay = Math.random() * 3; // 0-3秒延迟
                    const x1 = Math.random() * 150 - 75; // 随机X偏移1
                    const y1 = Math.random() * 150 - 75; // 随机Y偏移1
                    const x2 = Math.random() * 150 - 75; // 随机X偏移2
                    const y2 = Math.random() * 150 - 75; // 随机Y偏移2

                    // 内联粒子动画（替代动态style标签，确保路径唯一）
                    particle.style.animation = `
                        particle-float ${animDuration}s ease-in-out ${animDelay}s infinite,
                        particle-fade ${animDuration}s ease-in-out ${animDelay}s infinite
                    `;

                    // 添加粒子到页面
                    document.body.appendChild(particle);

                    // 动画结束后移除粒子（避免内存泄漏）
                    particle.addEventListener('animationend', (e) => {
                        if (e.animationName === 'particle-float') {
                            particle.remove();
                        }
                    });
                }
            }

            // 5. 粒子动画关键帧（内联定义，避免重复）
            const particleKeyframes = document.createElement('style');
            particleKeyframes.textContent = `
                @keyframes particle-float {
                    0% { transform: translate(0, 0); }
                    50% { transform: translate(var(--x-offset, 0), var(--y-offset, 0)); }
                    100% { transform: translate(0, 0); }
                }
                @keyframes particle-fade {
                    0%, 100% { opacity: 0.1; }
                    50% { opacity: 0.3; }
                }
            `;
            document.head.appendChild(particleKeyframes);
        });
    </script>
</body>
</html>